<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TVVM test page</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <script src="../../dist/tvvm.js"></script>
  <style>
    
    *:focus {
      border: 1px solid red;
    }

    .test-block {
      margin: 1rem;
      padding: 2rem;
      padding-top: 1rem;
      border: 1px solid #000;
    }

    .test-block span:first-child {
      display: block;
      margin: 0 auto;
      margin-bottom: 1rem;
      font-weight: bold;
      text-align: center;
    }

    .index-block {
      border: 1px solid #000;
      width: 200px;
      height: 100px;
      margin: 10px;
    }
    .high-light {
      border: 1px solid red;
    }
    .apple {
      background-color: red;
    }
    .banana {
      color: yellow;
    }
    .cate {
      font-weight: bold;
    }
    .dog {
      border: 1px solid #000;
    }

  </style>
</head>
<body>
  <div id="app">
    <div class="container" style="height: 100%;">

      <!-- t-if test -->
      <div class='test-block'>
        <span>t-if test</span>
        <button @click="methods.handleDisplay">display</button>
        <button @click="methods.handleHidden">hidden</button>
        <div t-if="data.display">t-if="data.display"</div>
      </div>

      <!-- t-bind test -->
      <div class='test-block'>
        <span>t-bind test</span>
        <div :id="data.id" t-bind:name="data.name">:id="data.id" t-bind:name="data.name"</div>
      </div>

      <!-- t-class test -->
      <div class='test-block'>
        <span>t-class test</span>
        <button @click="methods.addClass">add class</button>
        <button @click="methods.deleteClass">del class</button>
        <div t-class="data.classList">t-class="data.classList"</div>
        <div t-class="data.classList2">t-class="data.classList2"</div>
      </div>

      <!-- t-index test -->
      <div class='test-block'>
        <span>t-index test</span>
        <div style="display: flex; flex-direction: row;">
          <div t-index="0-0, 1-0" real-focus="true" class="index-block" style="height: 200px">t-index="0-0, 1-0"</div>
          <div t-index="0-1, 1-1" real-focus="true" class="index-block" style="height: 200px">t-index="0-1, 1-1"</div>
          <div>
            <div t-index="0-2" class="index-block">
                t-index="0-2"
            </div>
            <div t-index="1-2" class="index-block">
                t-index="1-2"
            </div>
          </div>
        </div>
      </div>

      <!-- t-for test -->
      <div class="test-block">
        <span>t-for test</span>
        <ul style="list-style: none;">
          <li @click="methods.testFn(item)" t-for="item in data.arr">{{item + 1}}</li>
        </ul>
      </div>

      <!-- t-value test -->
      <div class="test-block">
        <span>t-value test</span>
        <input t-value="data.input.value" />
        <span>{{data.input.value}}</span>
        <input t-value="data.name" />
        <span>{{data.name}}</span>
      </div>

      <!-- {{}} test -->
      <div class="test-block">
        <span>{{}} test</span><br>
        <span>{{data.input.value.toString()}}</span><br>
        <span>{{data.input.value + data.name}}</span><br>
        <span>{{Number(data.input.value)}}</span><br>
        <span>{{data.input.value}}</span><br>
        <span>{{data.input.value + 1}}</span><br>
        <span>{{data.input.value + '1'}}</span><br>
        <span>{{data.input.value * 2}}</span><br>
      </div>
    </div>

  </div>
  <script>
    new TVVM({
      el: '#app',
      data: function () {
        return {
          num: 0,
          // t-if test
          display: true,
          // t-bind test
          id: 'bind-id',
          name: 'bind-name',
          // t-class test
          classList: ['apple', 'banana', 'cate'],
          classList2: {
            'apple': true,
            'banana': false,
            'cate': true
          },
          // t-for test
          arr: [1,2,3,4],
          // t-value test
          input: {
            value: '2341234'
          },
        }
      },
      methods: {
        addClass: function () {
          this.classList = this.classList.concat('dog')
        },
        deleteClass: function () {
          this.classList2 = {}
        },
        handleDisplay: function () {
          this.display = true
        },
        handleHidden: function () {
          this.display = false
        },
        testFn: function (a) {
          console.log('click num is', a)
        }
      },
      focus: {
        activeClass: 'high-light'
      },
      hooks: {
        beforeCreate: function () {
          console.log('this.arr', this.arr)
        },
        created: function () {
          console.log('this.arr', this.arr)
        },
        beforeMount: function () {
          console.log('this.$el', this.$el)
        },
        mounted: function () {
          console.log('this.$el', this.$el)
        },
        beforeUpdate: function () {

        },
        updated: function () {

        }
      },
    })
  </script>
</body>
</html>